<template>
    <div class="app-container">
        <el-form :model="queryParams"
                 ref="queryForm"
                 :rules="queryRules"
                 :inline="true"
                 v-show="showSearch"
                 label-width="95px"
        >

            <el-form-item label="网关" prop="gatewayId">
                <gateway-select @changeGateway="changeGateway" :isShowFirst="true"/>
            </el-form-item>

            <el-form-item label="信息点" prop="sensorId">
                <el-select v-model="queryParams.sensorId"
                           placeholder="请选择信息点"
                           clearable
                           size="small"
                >
                    <el-option
                        v-for="item in sensorList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </el-form-item>

        </el-form>

        <el-form :model="queryParams"
                 :inline="true"
                 ref="timeRef"
                 :rules="timeRules"
                 label-width="85px"
        >

            <el-form-item label="开始时间" prop="beginTime">
                <el-date-picker
                    v-model="queryParams.beginTime"
                    value-format="yyyyMMdd"
                    type="date"
                    size="small"
                    :picker-options="beginTimePicker"
                    placeholder="请选择开始时间"
                >
                </el-date-picker>
            </el-form-item>

            <!--            yyyy-MM-dd HH:mm:ss-->
            <el-form-item label="结束时间" prop="endTime">
                <el-date-picker
                    v-model="queryParams.endTime"
                    value-format="yyyyMMdd"
                    type="date"
                    :picker-options="endTimePicker"
                    size="small"
                    placeholder="请选择结束时间"
                >
                </el-date-picker>
            </el-form-item>

            <!--            <el-form-item label="时间间隔" prop="timeIntervalId">-->
            <!--                <el-select v-model="queryParams.timeIntervalId"-->
            <!--                           placeholder="请选择时间间隔"-->
            <!--                           size="small" @change="changeTimeInterval"-->
            <!--                >-->
            <!--                    <el-option-->
            <!--                        v-for="item in timeIntervalList"-->
            <!--                        :key="item.value"-->
            <!--                        :label="item.label"-->
            <!--                        :value="item.value"-->
            <!--                    />-->
            <!--                </el-select>-->
            <!--            </el-form-item>-->

            <el-form-item>
                <el-button type="success" @click="selectHistory" size="small">查询</el-button>
            </el-form-item>

        </el-form>

        <el-row :gutter="32" v-if="dataList.length>0">
            <el-col :xs="24" :sm="24" :lg="12" :key="item.id" v-for="(item, index) in dataList">
                <div class="chart-wrapper">
                    <line-chart :title="item.title" :chart-data="item.chartData" :xAxisData="item.echartsX"/>
                </div>
            </el-col>
        </el-row>

    </div>
</template>

<script>

import { listSensorByGatewayId } from '@/api/equipment/sensor'
import { list } from '@/api/biz/sensorHistoryData'
import GatewaySelect from '@/views/common/GatewaySelect'
import MyLineChart from '@/views/dashboard/MyLineChart'
import LineChart from '@/views/common/chart/LineChart'

export default {
    // 历史曲线
    name: 'History',
    components: {
        GatewaySelect,
        MyLineChart,
        LineChart
    },
    data() {
        return {
            queryParams: {
                gatewayId: null,
                sensorId: null,
                timeIntervalId: 1,
                beginTime: '',
                endTime: ''
            },
            queryRules: {
                timeIntervalId: [
                    { required: true, trigger: 'blur', message: '请选择时间间隔' }
                ]
            },
            timeRules: {},
            showSearch: true,
            gatewayMapping: {},
            gatewayList: [],
            echartsX: [],
            echartsDataList: [],
            echartsLegendList: [],
            sensorList: [],
            timeIntervalList: [
                { value: 1, label: '15分钟' },
                { value: 2, label: '30分钟' },
                { value: 3, label: '1小时' }
            ],
            beginTimePicker: this.beginDate(),
            endTimePicker: this.processDate(),

            dataList: []
        }
    },
    mounted() {
        // let _this = this
        // window.addEventListener("resize", function () {
        //     if (_this.chartDom == null) {
        //         _this.chartDom = _this.$echarts.init(document.getElementById('myChart'))
        //     }
        //     _this.chartDom.resize()
        // })
    },
    methods: {

        changeGateway(obj) {
            this.gatewayListOption = obj.gatewayListOption
            this.queryParams.gatewayId = obj.gatewayId
            this.getList()
            this.getSensorHistoryMethod()
        },

        getList() {
            this.getSensorList()
            // this.getSensorHistoryMethod()
        },

        getSensorList() {
            let gatewayId = this.queryParams.gatewayId
            if (gatewayId == null || gatewayId === '') {
                this.sensorList = []
                return
            }
            listSensorByGatewayId(gatewayId).then(response => {
                this.sensorList = response.data
            })
        },

        beginDate() {
            const self = this
            return {
                disabledDate(time) {
                    // 如果结束时间不为空，则小于结束时间
                    if (self.queryParams.endTime) {
                        return new Date(self.queryParams.endTime).getTime() < time.getTime()
                    } else {
                        // return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
                    }
                }
            }
        },

        processDate() {
            const self = this
            return {
                disabledDate(time) {
                    // 如果开始时间不为空，则结束时间大于开始时间
                    if (self.queryParams.beginTime) {
                        return new Date(self.queryParams.beginTime).getTime() > time.getTime()
                    } else {
                        // return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
                    }
                }
            }
        },
        selectHistory() {
            this.$refs.queryForm.validate(valid => {
                if (valid) {
                    this.$refs.timeRef.validate(valid => {
                        if (valid) {
                            this.getSensorHistoryMethod()
                        }
                    })
                }
            })
        },
        getSensorHistoryMethod() {

            list(this.queryParams).then(response => {

                console.log('响应...', response)

                this.dataList = []

                let data = response.data
                let length = data.length

                if (length > 0) {

                    console.log('length的长度', length)

                    for (let i = 0; i < length; i++) {
                        let mill = Date.now() + i
                        let sensorName = data[i]['sensorName']
                        let chartData = [
                            {
                                name: sensorName,
                                data: data[i]['data']
                            }
                        ]
                        let echartsX = data[i]['echartsX']
                        if (echartsX.length > 0) {
                            let obj = {
                                id: mill,
                                title: sensorName,
                                echartsX: echartsX,
                                chartData: chartData,
                                show: true
                            }
                            this.dataList.push(obj)
                        }
                    }
                    console.log('结果', this.dataList)
                }
                if (this.dataList.length === 0) {
                    let mill = Date.now()
                    let item = {
                        id: mill,
                        title: '模拟数据',
                        echartsX: [
                            '2020-10-01 10:00:00',
                            '2020-10-01 10:15:00',
                            '2020-10-01 10:30:00',
                            '2020-10-01 10:45:00',
                            '2020-10-01 11:00:00',
                            '2020-10-01 11:15:00',
                            '2020-10-01 11:30:00',
                            '2020-10-01 11:45:00',
                            '2020-10-01 12:00:00',
                            '2020-10-01 12:15:00'
                        ],
                        chartData: [
                            {
                                name: '模拟数据',
                                data: [
                                    5, 7, 9, 8, 11, 15, 16, 4, 20, 13
                                ]
                            }
                        ]
                    }
                    this.dataList.push(item)
                }
            })
        }
    }
}
</script>

<style scoped>

</style>
